<template>
<div class="right-recycle full-height">
  <!--  头部-->
  <div class="recycle-head row no-wrap bg-primary text-white">
    <span>回收站保留100条数据，如有需要请及时恢复。</span>
    <q-space></q-space>
    <q-btn @click="clear" label="清空" unelevated color="white" text-color="primary" size="12px" />
  </div>
  <q-table class="list-content table-file table-head-line scroll" :pagination="{rowsPerPage: 0}" no-data-label="暂无数据"
           :data="data" :columns="columns" row-key="id" hide-bottom>
    <template v-slot:body="props">
      <q-tr :props="props" :class="{'active': actFile.hasOwnProperty('id') && actFile.id === props.row.id}">
        <q-td key="label" :props="props">
          <q-icon v-if="props.row.isFile" class="vertical-middle" :name="setTypeFileIcon(props.row.label)" style="font-size:18px;" />
          <q-icon v-else class="vertical-middle" name="img:statics/svg/file-icon.svg" style="font-size:18px;" />
          <span class="margin-l-10 name ellipsis">{{ props.row.label }}</span>
        </q-td>
        <q-td key="position" :props="props">
          <div class="ellipsis path">{{ props.row.name }}</div>
        </q-td>
        <q-td key="size" :props="props">{{ sizeFormat(props.row.size) }}</q-td>
        <q-td key="deleteBy" :props="props">{{ props.row.deleteBy }}</q-td>
        <q-td key="deleteTime" :props="props">{{ props.row.timestamp | toTime }}</q-td>
        <q-menu touch-position context-menu @show="setAct(props.row)" @before-hide="clearAct()">
          <q-list dense style="min-width: 150px">
            <q-item clickable v-close-popup @click.stop="restore(props.row)">
              <q-item-section>还原</q-item-section>
            </q-item>
            <q-item clickable v-close-popup @click.stop="deleteRecord(props.row)" v-has="{ id: Enums.SYS_PERMISSION.G_DELETE_BTN.value }">
              <q-item-section>彻底删除</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-tr>
    </template>
  </q-table>
</div>
</template>

<script>
import { getFiletype, sizeFormat } from 'src/assets/js/util'
import { getRecyclebinList, restoreRecyclebin, cleanRecyclebin, rmFile } from 'src/boot/program-v2/G-gov'
export default {
  name: 'right-recycle',
  data () {
    return {
      columns: [ // 列表的头部
        { name: 'label', align: 'left', label: '文件名', field: 'label', style: 'width: 30%' },
        { name: 'position', align: 'left', label: '原位置', field: 'label', style: 'width: 40%' },
        { name: 'size', align: 'left', label: '大小', field: 'size' },
        { name: 'deleteBy', align: 'left', label: '操作人', field: 'deleteBy' },
        { name: 'deleteTime', align: 'left', label: '删除日期', field: 'timestamp' }
      ],
      data: [], // 列表数据
      isAll: false,
      actFile: {} // 选中的数据
    }
  },
  created () {
    this.getInfoList()
  },
  methods: {
    setTypeFileIcon (fileName) {
      let fileType = getFiletype(fileName)
      let svgName = fileType === 'other' ? 'img:statics/svg/paper-icon.svg' : `img:statics/svg/${fileType}.svg`
      return svgName
    },
    // 获取回收站列表
    getInfoList () {
      getRecyclebinList().then(res => {
        this.data = [...res.data.dirs, ...res.data.files.map(v => {
          return {
            ...v,
            isFile: true
          }
        })]
        this.isAll = res.data.isAll
      })
    },
    // 还原
    restore (file) {
      const params = {
        key: file.id,
        realname: file.path
      }
      restoreRecyclebin(params).then(res => {
        this.$message.success(`文件${file.label}还原成功`)
        this.getInfoList()
        this.$emit('refresh')
      })
    },
    // 彻底删除
    deleteRecord (file) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-28" ></i> 确定要彻底删除${file.label}吗？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(data => {
        rmFile(file.id).then(res => {
          this.getInfoList()
        })
      })
    },
    // 清空
    clear () {
      this.$q.dialog({
        title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-28" ></i> 清空后文件不可恢复，确定要清空回收站吗？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(() => {
        cleanRecyclebin({
          cleanAll: this.isAll
        }).then(res => {
          this.getInfoList()
        })
      })
    },
    // 设置选中
    setAct (item) {
      this.actFile = item
    },
    // 取消选中
    clearAct () {
      this.actFile = {}
    },
    // 文件大小格式化
    sizeFormat (size) {
      return sizeFormat(size)
    }
  }
}
</script>

<style scoped lang="stylus">
.right-recycle{
  .recycle-head{
    padding 0 20px
    height 40px
    line-height 40px
    /*font-size 14px*/
    align-items center
    font-size 12px
    .icon{
      margin-left 10px
      font-size 18px
    }
  }
  .active{
    background-color rgba(95,119,253, 0.2)
  }
}

</style>
<style lang="stylus">
.right-recycle .table-file{
  height 100%
  .q-table__middle{
    height calc(100% - 40px)
  }
}
</style>
